<template>
	<div>
		<Card>
			<label class="myLabel">应用分类<span>(必选)</span>：</label>
			<Select v-model="type" style="width:200px" @on-change="getList()">
				<Option v-for="item in typeList" :value="item.name" :key="item.name">{{ item.text }}</Option>
			</Select>
			<label class="myLabel">应用分组：</label>
			<Select v-model="name" style="width:200px" @on-change="getList()">
				<Option v-for="item in nameList" :value="item.metadata.name" :key="item.metadata.name">{{ item.metadata.name }}</Option>
			</Select>
			<Button style="margin: 10px 0;" type="primary" @click="createNsall = true" class="large">创建实例</Button>
			<Button style="margin: 10px 0;" type="primary" @click="setRouter" class="large">配置路由</Button>
			<Modal v-model="Instructions" title="使用说明编辑" width="800" footer-hide @on-cancel="cancel">
				<div style="display: none;">
					<div class="form-div">
						<label class="myLabel">containerName：</label>
						<Input v-model="mycontainerName" style="width: 500px" />
					</div>
					<div class="form-div">
						<label class="myLabel">uuid：</label>
						<Input v-model="myuuid" style="width: 500px" />
					</div>
					<div class="form-div">
						<label class="myLabel">port：</label>
						<Input v-model="myport" style="width: 500px" />
					</div>
				</div>
				<div class="form-div">
					<label class="myLabel">调用地址：</label>
					<Input v-model="myUrl" placeholder="请输入调用地址" style="width: 500px" />
				</div>
				<div class="form-div">
					<label class="myLabel">账户：</label>
					<Input v-model="myAccount" placeholder="请输入账户" style="width: 500px" />
				</div>
				<div class="form-div">
					<label class="myLabel">密码：</label>
					<Input v-model="myPassword" placeholder="请输入密码" style="width: 500px" />
				</div>
				<div class="form-div">
					<label class="myLabel">描述：</label>
					<Input v-model="myDescription" type="textarea" placeholder="请输入密码" :rows="10" style="width: 500px" />
				</div>
				<div class="form-div">
					<Button type="primary" @click="createInstructions" v-show="status!=0" style="float: right;">新建使用说明书</Button>
					<Button type="primary" @click="editInstructions" v-show="status==0" style="float: right;">修改使用说明书</Button>
				</div>
			</Modal>
			<Modal v-model="editRouter" title="配置路由" width="800" footer-hide>
				<Input v-model="routerText" type="textarea" :rows="30" placeholder="Enter something..." />
				<Button type="primary" @click="reBoot" style="float: right;margin-left: 10px;margin-top:20px;">刷新配置</Button>
				<Button type="primary" @click="editRouterText" style="float: right;margin-top:20px;">修改配置</Button>
			</Modal>
			<Table :columns="columns" :data="tableData"></Table>
		</Card>
	</div>
</template>

<script>
	export default {
		data () {
			return {
				columns: [
					{
						title: '应用名称',
						key: 'metadata',
						width: '200px',
						render: (h, params) => {
							return h('span', params.row.metadata.name)
						}
					},
					{
						title: '应用分组',
						key: 'metadata',
						width: '120px',
						render: (h, params) => {
							return h('span', params.row.metadata.namespace)
						}
					},
					{
						title: '标签',
						key: 'metadata',
						render: (h, params) => {
							let str = ''
							for (var item in params.row.metadata.labels) {
								str += item + ':' + params.row.metadata.labels[item] + '\n'
							}
							return h('div', str)
						}
					},
					{
						title: '状态',
						key: 'status',
						width: '80px',
						render: (h, params) => {
							for (let i = 0; i < params.row.status.conditions.length; i++) {
								if (params.row.status.conditions[i].status !== 'True') {
									return h('span', '非正常')
								} else {
									return h('span', '正常')
								}
							}
						}
					},
					{
						title: '启动时间',
						key: 'metadata',
						width: '200px',
						render: (h, params) => {
							var date1 = new Date(params.row.metadata.creationTimestamp).toString().replace(/-/g, '/')
							var date2 = new Date(+new Date(date1) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '')
							return h('span', date2)
						}
					},
					{
						title: '容器组',
						key: 'spec',
						width: '80px',
						render: (h, params) => {
							return h('span', params.row.status.availableReplicas + '/' + params.row.spec.replicas)
						}
					},
					{
						title: '镜像',
						key: 'spec',
						render: (h, params) => {
							return h('span', params.row.spec.template.spec.containers[0].image)
						}
					},
					{
						title: '操作',
						key: 'handle',
						render: (h, params) => {
							return h('div', [
								h('Button', {
									props: {
										type: 'primary',
										size: 'small'
									},
									style: {
										marginRight: '5px'
									},
									on: {
										click: () => {
											this.$router.push({
												name: 'applicationHome'
											})
											sessionStorage.username = params.row.metadata.labels.owner
											sessionStorage.containerName = params.row.metadata.name
										}
									}
								}, '查看'),
								h('Button', {
									props: {
										type: 'primary',
										size: 'small'
									},
									style: {
										marginRight: '5px'
									},
									on: {
										click: () => {
											this.Instructions = true
											// this.remove(params.index)
											this.$api.get(0, '/kuber/con?containerName=' + params.row.metadata.name + '&owner=' + this.user.userName, {}, r => {
												if (r.data.code === 0) {
													this.mycontainerName = r.data.data.containerName
													this.myuuid = r.data.data.uuid
													this.myport = r.data.data.hostPort
													this.$api.get(0, '/kuber/description?uuid=' + this.myuuid, {}, r => {
														this.status = r.data.code
														if (r.data.code === 0) {
															this.editId = r.data.data.id
															// 调用地址
															this.myUrl = r.data.data.url
															// 账户
															this.myAccount = r.data.data.account
															// 密码
															this.myPassword = r.data.data.password
															// 描述
															this.myDescription = r.data.data.description
														}
													})
												}
											})
										}
									}
								}, '编辑使用说明书'),
								h('Button', {
									props: {
										type: 'primary',
										size: 'small'
									},
									style: {
										marginRight: '5px'
									},
									on: {
										click: () => {
											this.$router.push({
												name: 'appDetails',
												params: {
													type: this.type,
													group: params.row.metadata.namespace,
													name: params.row.metadata.name
												}
											})
										}
									}
								}, '详情'),
								h('Button', {
									props: {
										type: 'primary',
										size: 'small'
									},
									on: {
										click: () => {
											this.remove(params.index)
										}
									}
								}, '删除')
							])
						}
					}
				],
				tableData: [],
				name: '',
				nameList: [],
				nsName: '',
				Instructions: false,
				user: {},
				mycontainerName: '',
				myuuid: '',
				myport: '',
				// 调用地址
				myUrl: '',
				// 账户
				myAccount: '',
				// 密码
				myPassword: '',
				// 描述
				myDescription: '',
				status: 100,
				editId: 0,
				url: '',
				// 镜像地址列表
				urlList: [],
				// 临时名称组
				NameList: [],
				// 用户列表
				peopleList: [],
				timer: {},
				editRouter: false,
				routerText: '',
				// 应用类型
				type: 'Deployment',
				// 应用类型列表
				typeList: [
					{
						name: 'Deployment',
						text: '部署'
					},
					{
						name: 'ReplicationController',
						text: '副本控制器'
					},
					{
						name: 'Service',
						text: '服务'
					},
					{
						name: 'Pod',
						text: '容器'
					}
				]
			}
		},
		methods: {
			// 展示信息回调
			show (index) {
				this.$Modal.info({
					title: '信息',
					content: `实例名称：${this.tableData[index].metadata.name}<br>标签：-<br>状态：${this.tableData[index].status.phase}<br>启动时间：${this.tableData[index].metadata.creationTimestamp},<br>所在节点：${this.tableData[index].spec.nodeName}`
				})
			},
			// 删除
			remove (index) {
				let podName = this.tableData[index].metadata.name
				this.$api.post(0, '/kuber/deletePod', {
					nsName: this.name,
					podName: podName
				}, r => {
					if (r.data.msg === '删除成功') {
						this.tableData.splice(index, 1)
						this.$Notice.info({
							title: '删除成功'
						})
					}
				})
			},
			// 命名选择的命名空间
			getList () {
				this.$api.get(0, '/kuber/v2/k8s/apps?type=' + this.type + '&nameSpace=' + this.name, {}, r => {
					if (r.data.code === 0) {
						this.tableData = r.data.data.items
					}
				})
				this.timer = setInterval(() => {
					this.$api.get(0, '/kuber/v2/k8s/apps?type=' + this.type + '&nameSpace=' + this.name, {}, r => {
						if (r.data.code === 0) {
							this.tableData = r.data.data.items
						}
					})
				}, 5000)
			},
			createInstructions () {
				this.$api.post(0, '/kuber/description', {
					uuid: this.myuuid,
					containerName: this.mycontainerName,
					port: this.myport,
					url: this.myUrl,
					account: this.myAccount,
					password: this.myPassword,
					description: this.myDescription
				}, r => {
					console.log(r)
					if (r.data.code === 0) {
						this.cancel()
						this.$Notice.info({
							title: '创建成功'
						})
						this.Instructions = false
					} else {
						this.$Notice.info({
							title: '创建失败'
						})
					}
				})
			},
			editInstructions () {
				this.$api.put(0, '/kuber/description', {
					id: this.editId,
					uuid: this.myuuid,
					containerName: this.mycontainerName,
					port: this.myport,
					url: this.myUrl,
					account: this.myAccount,
					password: this.myPassword,
					description: this.myDescription
				}, r => {
					console.log(r)
					if (r.data.code === 0) {
						this.cancel()
						this.$Notice.info({
							title: '修改成功'
						})
						this.Instructions = false
					} else {
						this.$Notice.info({
							title: '修改失败'
						})
					}
				})
			},
			cancel () {
				this.mycontainerName = ''
				this.myuuid = ''
				this.myport = ''
				// 调用地址
				this.myUrl = ''
				// 账户
				this.myAccount = ''
				// 密码
				this.myPassword = ''
				// 描述
				this.myDescription = ''
				this.editId = 0
			},
			// 获取镜像列表
			getMirror () {
				// 获取项目id
				this.$api.post(0, '/kuber/imgs/getRepositories', {}, r => {
					this.urlList = []
					if (r.data.code === 0) {
						for (let a = 0; a < r.data.data.length; a++) {
							this.$api.post(0, '/kuber/imgs/getProjectsPage', {page: 1, limit: 1000, rid: r.data.data[a].project_id}, data => {
								if (data.data.code === 0) {
									if (data.data.data.length !== 0) {
										this.NameList = data.data.data
										for (var b = 0; b < this.NameList.length; b++) {
											this.$api.post(0, '/kuber/imgs/getDetail', {pname: this.NameList[b].name}, rData => {
												if (rData.data.code === 0) {
													for (var d = 0; d < this.NameList.length; d++) {
														for (var c = 0; c < rData.data.data.length; c++) {
															this.urlList.push(this.url + '/' + this.NameList[d].name + ':' + rData.data.data[c].name)
														}
													}
												}
											})
										}
									}
								}
							})
						}
					}
				})
			},
			// 获取调用地址
			getUrl () {
				this.$api.post(0, '/kuber/imgs/getSystemInfo', {}, r => {
					this.url = r.data.data.registry_url
				})
			},
			// 获取所有用户
			getPeople () {
				this.$api.post(0, '/auth/user/getAllUser', {}, r => {
					if (r.data.code === 0) {
						this.peopleList = r.data.data
					}
				})
			},
			// 配置路由
			setRouter () {
				this.editRouter = true
				this.$api.get(0, '/kuber/description/config', {}, r => {
					if (r.data.code === 0) {
						this.routerText = r.data.data
					}
				})
			},
			// 修改路由
			editRouterText () {
				this.$api.post(0, '/kuber/description/config', {
					config: this.routerText
				}, r => {
					if (r.data.code === 0) {
						this.$Message.success('修改成功')
					} else {
						this.$Message.error('修改失败')
					}
				})
			},
			reBoot () {
				this.$api.post(0, '/kuber/description/reboot', {}, r => {
					if (r.data.code === 0) {
						this.$Message.success('刷新成功')
					} else {
						this.$Message.error('刷新失败')
					}
				})
			},
			// 应用类型获取
			getType () {}
		},
		mounted () {
			this.user = JSON.parse(sessionStorage.user)
			// 命名空间列表
			this.$api.get(0, '/kuber/v2/k8s/nameSpace', {}, r => {
				this.nameList = r.data.data.items
			})
			this.getMirror()
			this.getUrl()
			this.getPeople()
			this.getList()
		},
		destroyed () {
			let my = this
			window.clearInterval(my.timer)
		}
	}
</script>

<style>
	label.myLabel {
		width: 120px;
		display: inline-block;
		margin-right: 15px;
		text-align: right;
	}
	label.myLabel span{
		font-size: 12px;
		color: #ddd
	}
	div.form-div {
		margin-bottom: 15px;
	}
</style>
